// Core variables and mixins
@import "../less/app.variables.less";
@import "../less/app.mixins.less";

@import "../less/app.reset.less";
@import "../less/app.layout.less";
@import "../less/app.nav.less";

@import "../less/app.arrow.less";
@import "../less/app.buttons.less";
// @import "../less/app.widgets.less";
// @import "../less/app.icons.less";

//@import "../less/app.switch.less";
//@import "../less/app.plugin.less";

@import "../less/app.colors.less";
@import "../less/app.utilities.less";

// @import "../less/app.musicbar.less";






/*=====自定义=======*/

body{
	font-family:Arial,"Microsoft Yahei","微软雅黑",'SYHT',Helvetica,sans-serif;
    background: @body-bg;
}

ul,ol,h1,h2,h3,h4,h5{
	list-style: none;
	margin: 0;
	padding: 0;
}

header{
	.input-group{
		input{
			border-right: none;
		}
		.input-group-btn{
			.btn{
				padding-left: 15px;
				padding-right: 15px;
				&:hover{
					border-left: none;
				}
			}
		}
	}
	.h-header{
		height: @top-height;
		line-height: @top-height;
	}
	
	.form-control{
		border-color: #eee;
	}

}
.badge {
	padding: 2px 6px !important;
	font-weight: normal;
}


.plus{
	display: block;
	background: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
}
.horizontal{
	width: 32px;
	height: 2px;
	margin-top: -1px;
	margin-left: -16px;
}
.vertical{
	width: 2px;
	height: 32px;
	margin-top: -16px;
	margin-left: -1px;
}

/*网格间距*/
.container,.container-fluid {
	@pm:10px;
	padding: 0 @pm;
	.row{
		margin-left: -@pm;
		margin-right: -@pm;
		[class^=col-]{
			padding-left: @pm;
			padding-right: @pm;
		}	
	}

}

/*主要内容区*/
@media (min-width: 768px){
	.main-content{
		margin:20px 0 60px;
	}
}


/*快捷菜单按钮*/
.container-fluid{
	padding: 0 20px;
}
.boxes{
	padding:0;
	.c-box{
		text-align: center;
		padding: 10px;
		display: block;
		color: #fff;
		margin-bottom: 20px;
		.fa{
			display: block;
			padding:5px 0 10px;
			font-size: 28px;
		}
		span{
			display: block;
			text-align: center;
		}
	}
	
}

.panel-box{
    .panel{
        .panel-heading{
            .panel-title{
               font-size: 14px;
                i{margin-right: 10px;}
            }
        }
        .list-group{
            li{
                position: relative;
                .time{
                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #999;
                }
                a{
                    color: #666;
                    &:hover{
                        color: @c-primary;
                    }
                    &:before{
                        content:"\f138";
                        font-family: "FontAwesome";
                        color: #ccc;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}

.number-box{
	.s-box{
		background: #fff;
		overflow: hidden;
		position: relative;
		margin-bottom: 20px;
        -webkit-box-shadow: 0 1px 1px darken(@body-bg,8%);
        box-shadow: 0 1px 1px darken(@body-bg,8%);
		.bigicon{
			font-size: 75px;
			color: rgba(0,0,0,.09);
			position: absolute;
			right: -10px;
			top: -10px;
		}
		h5{
			margin: 0;
			font-size: 14px;
			color: #666;
			padding: 10px 15px 0;
		}
		.number{
			padding: 5px 15px;
			b{
				font-family: "SYHT";
				font-size: 45px;
				color: #666;
				margin-right: 10px;
				font-weight: 100;
			}
			span{
				font-size: 14px;
				color: #999;
			}
		}
		.s-foot{
			display: block;
			padding: 0 15px;
			color: rgba(255,255,255,.6);
			line-height: 24px;
			i{
				margin-top: 5px;
				margin-right: -5px;
			}
			transition: all .3s;
			&:hover{
				color:rgba(255,255,255,1);
			}
			
		}
	}
}

.backhome{
    display: block;
    background: @c-info;
    line-height: 60px;
    height: 60px;
    text-align: center;
    i{
        color: #fff;
    }
    &:hover{
        background:@c-warning 
    }
}
.pages{
    > li > a{
        text-align: center;
        padding: 15px 5px;
        font-size: 32px;
        font-family: "SYHT";
        // font-weight: 100;
        i.fa{
            font-size: 14px;
        }
    }

}
.page-text{
    > li > a{
        font-size: 14px;
    }
}
.add-btn{
	position: relative;
	padding: 15px 0;
	display: block;
	height: 70px;
	i{
		background:lighten(@c-dark,40%) ;
		transition: all .3s;
	}
	&:hover{
		i{background: @c-primary;}
	}
}


/*设计区域*/

.design-content{
    @left-width:300px;
    @right-width:260px;
    position: relative;
    background: #f4f4f4 url(../images/bg.gif);
    .left-side{
        position: absolute;
        width: @left-width;
        left: 0;
        top: 0;
        bottom: 0;
        background: #fff;
        box-shadow: 1px 0 3px rgba(0,0,0,.1);
		 [class^=col-]{
			padding-left: 5px;
			padding-right: 5px
		}
		.thumbnails{
			margin-left: -10px;
			margin-right: -10px;
			.thumbnail{
				border-radius: 0;
				padding: 2px;
				&:hover{
					border-color: @c-warning
				}
			}
			.active{
				position: relative;
				border-color: @c-warning;
				&:after{
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					background: fadeout(@c-warning,50%) ;
				}
			}
			.plus-box{
				display: block;
				padding: 5px 0;
				margin: 0 auto;
				border: 1px dashed #ccc;
				text-align: center;
				color: #ccc;
				&:hover{
					border-color: @c-warning;
					color: @c-warning;
				}
			}
		}
		.nav-tabs{
			margin-top: -10px;
			margin-bottom: 10px;
			border-bottom: 2px solid #EFEFEF;
			li{
				margin-bottom: -2px;
				a{
					border: none;
					border-bottom: 2px solid transparent !important;
					&:hover{
						background: transparent;
						color: @c-warning
					}
				}
			}
			>.active{
				a{
					color:  @c-primary !important;
					border-bottom-color: @c-primary !important
				}
			}
		}
		.ass{
			padding: 8px 0 0;
			margin-bottom: 8px;
			border: 1px dashed #fff;
			cursor: move;
			&:hover{
				border-radius: 3px;
				border-color: #ccc;
			}
			&:active{
				background: @c-primary;
				border-color: #fff;
				i,span{
					color: #fff;
				}
				
			}
			i{
				font-size: 28px;
				color: @c-primary;
				display: block;
				text-align: center;
			}
			span{
				display: block;
				color: #999;
				text-align: center;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap; 
			}
		}

    }
    .center-content{
        position: absolute;
        left: @left-width;
        top: 0;
        right: @right-width;
        bottom: 0;
		.device-box{
			width: 415px;
			margin: 10px auto;
			.marvel-device:after{z-index: auto}
		}
		.phone-content{
			z-index: 9999;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: #eee;
			background-position: center center;
			background-size: 100% auto;
			.obj{
				&:after{
					content: "";
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
				}
				&:hover{
					&:after{
						border: 1px dashed #fff;
					}
				}
			}
		}
		.control-bar{
			position: absolute;
			right: 0;
			padding: 20px 30px 20px 0;
			top: 0;
			bottom: 0;
			.r-btn{
				display: block;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				line-height: 50px;
				font-size: 28px;
				text-align: center;
				margin-bottom: 15px;
				padding: 0;
			}
			.closebtn{
				position: relative;
				i{
					transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					-webkit-transform: rotate(45deg);
					-o-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
				}


			}
			.complete-btn{
				position: absolute;
				font-size: 16px;
				font-weight: 100;
				color: #fff;
				bottom: 30px;
				left: 0;
				width: 60px;
				height: 60px;
				line-height: 60px;
				background: #000;
				&:hover{
					background: @c-primary
				}
			}
		}

    }
    .right-side{
        position: absolute;
        width: @right-width;
        right: 0;
        top: 0;
        bottom: 0;
        background: #fff;
        box-shadow: -1px 0 3px rgba(0,0,0,.1);
		.att-header{
			background: #f5f5f5;
			border-bottom: 1px solid #eee;
			margin: 0;
			padding: 10px 15px;
			font-size: 16px;
			i{
				margin-right: 10px;
			}
		}
		.att-content{
			padding:10px 15px;
			h5{
				border-left: 3px solid @c-primary;
				padding-left: 8px;
				margin-bottom: 15px;
				font-weight: bold;
			}
			.form-group{
				input,.btn{
					border-color: #e2e2e2 ;
				}
			}
			.btn-box{
				padding: 15px 0;
				border-top: 1px solid #eee;
				text-align: right;
				.btn{
					margin-left: 10px;
				}
			}
		}
    }
}

/*折叠面板*/
.panel-group{
	.panel-default{
		margin: 0 !important;
		border: none;
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid #ebebeb;
		.panel-heading{
			padding: 0;
			.panel-title{
				a{
					background: #f8f8f8;
					display: block;
					padding: 10px 15px;
					box-shadow: 0 1px 0 #fff inset;
					i{
						margin-right: 10px;
						transition: all .3s;
					}

				}
				.arrow-down{
					i{
						transform: rotate(90deg);
						-webkit-transform: rotate(90deg);
						-moz-transform: rotate(90deg);
						-o-transform: rotate(90deg);
						-ms-transform: rotate(90deg);
					}
				}
			}
		}

		.panel-body{
			border-color: #f0f0f0;
		}
	}
}


/*模块样式*/
.p-box{
	position: absolute;
	background: rgba(0,0,0,.5);
	bottom: 50px;
	width: 100%;
	padding: 15px;
	h1,h2,h3,h4,h5{
		margin: 0;
		padding:0 0 10px;
		color: #fff;
		font-weight: 100;
	}
	p{
		text-align: left;
		color: #fff;
		line-height: 1.8;
		font-size: 14px;
	}
	.arrow{
		position: absolute;
		display: block;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 35px;
		bottom: -15px;
		left: 0;
		&:hover{
			color: @c-primary;
		}
	}
}


/*手机背景*/
.p-bg-1{background: url(../images/bg/p-bg-1.jpg) no-repeat}



/*列表页面*/

.float-right{
    .float-right(15px);
}


.header-bar{
    position: relative;
    padding: 10px 0;
    margin-bottom: 10px;
    h3{
        margin: 0;
        font-size: 16px;
        border-left: 3px solid @c-primary;
        padding-left: 10px;
        color: #333;
    }
}
.list-box{
    background: #fff;
    padding: 20px;
    >li{
        @left-width:100px;
        
        padding: 0 0 15px;
        margin: 0 0 15px;
        border-bottom: 1px dashed #ddd;
        overflow: hidden;
        position: relative;
        img{
            display: block;
            max-width: @left-width;
        }
        h4{
            margin: 0 0 0 @left-width + 15;
            color: #333;
        }
        .info-box{
            padding: 10px 0;
            color: #999;
            margin: 0 0 0 @left-width + 15;
        }
        .create-time{
            color: #999;
            position: absolute;
            bottom: 15px;
            left: @left-width + 15;
        }
        ul.btns{
            float: right;
            overflow: hidden;
            .float-right(0);
            > li{
                float: left;
                padding: 0 15px;
                a{
                    display: block;
                    
                    i{
                        display: block;
                       .circular(56px) ;
                        margin: 0 auto;
                        font-size: 28px;
                        background: lighten(@c-dark,40%);
                        color: #fff;
                        margin-bottom: 5px;
                        .transition(all .3s) ;
                    }
                    span{
                        display: block;
                        text-align: center;
                        color: #999;
                        font-size: 14px;
                        .transition(all .3s) ;
                    }
                    &:hover{
                        i{background:lighten(@c-dark,20%) !important };
                        span{color: lighten(@c-dark,20%) !important }
                    }
                }
            }
        }
        
    }
}



// 设计页面
.add-width{
	width: 120px !important;
	.nav > li > a{
		text-align: center;
		padding:20px 10px ;
	}
}